import {useEffect, useRef, useState} from "react";
import {FormItemInstance} from "@taroify/core/form";
import {HideLoading, ShowLoading, ShowToast} from "@/utils";
import Taro from "@tarojs/taro";
import {uploadFile} from "@/request/upload";
import {Field, Uploader} from "@taroify/core";
import {Image, Text, Video, View} from "@tarojs/components";

interface propsType {
    name: string;
    label: string,
    type?: 'video' | 'image',
    initVal: string[],
    rules?: any[],
    orderId?: string | number
}

function FormUpload({
        name,
        label,
        type = 'image',
        initVal,
        rules,
        orderId
    }: propsType
) {
    const itemRef = useRef<FormItemInstance>()
    const [showList, setShowList] = useState<string[]>([])

    useEffect(() => {
        itemRef.current?.setValue(showList)
    }, [showList])

    useEffect(() => {
        setShowList(initVal)
    }, [initVal])

    function onUpload() {
        if (showList?.length >= 5) {
            ShowToast('最多上传五张照片/视频')
            return
        }
        Taro.chooseMedia({
            count: 1,
            mediaType: [type],
            sizeType: ["original", "compressed"],
            sourceType: ["album", "camera"],
            maxDuration: 60,
        }).then(({tempFiles}) => {
            ShowLoading()
            uploadFile(
                '/disp/biz/aliyun/uploadFile',
                // '/disp/common/file/uploadImage'
                tempFiles[0].tempFilePath, {
                    orderId
                }).then(res => {
                setShowList((list) => {
                    return [...list, res.data]
                })
            }).finally(() => {
                HideLoading()
            })
        })
    }

    const previewImage = (urls: string[], index: number) => {
        Taro.previewImage({
            current: urls[index],
            urls
        })
    }

    const deleteFileItem = (url: string) => {
        setShowList((showList).filter(item => {
            return item !== url
        }))
    }

    return <Field ref={itemRef} label={label} name={name} rules={rules}>
        <View className={'flex-row flex-item flex-warp'}>
            {
                showList.map((url, index) => {
                    return (<View className={'file-preview-item'}>
                        <Text className={'iconfont icon-base-close2 delete-img-btn'}
                              onClick={() => deleteFileItem(url)}></Text>
                        {type === 'image' ?
                            <Image className={'upload-item-item'} onClick={() => previewImage(showList, index)}
                                   mode="scaleToFill" src={url}/> :
                            <Video className={'upload-item-item'} src={url}></Video>}
                    </View>)
                })
            }
            <Uploader
                value={[]}
                multiple
                onUpload={onUpload}
                onChange={(files) => console.log(files)}/>
        </View>
    </Field>
}

export default FormUpload